<template>
  <div
    class="more-container"
    v-loading="loading"
    element-loading-text="页面加载中，马上就好！"
  >
    <div style="dashboard-content" v-if="dataSuccess">
      <!-- 顶部标题区域 -->
      <dashboardTitle
        class="dashboardtitle"
        :title="schoolName"
      ></dashboardTitle>
      <!-- 轮播图区域 -->
      <dashboardSwiper></dashboardSwiper>
      <!-- 图表区域 -->
      <div class="echartsarea">
        <el-row>
          <el-col :span="10">
            <div class="e-left">
              <div class="shortcuts">
                <shortcuts :setTingData="setTingData"></shortcuts>
              </div>
              <div class="train">
                <trainchart :chartDatas="shortcutsData"></trainchart>
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="e-right">
              <div class="right-top">
                <studentNum :total="stTotal"></studentNum>
              </div>
              <recruit :recruitDatas="recruitData"></recruit>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 底部区域 -->
      <footers></footers>
    </div>
    <!-- 入驻成功弹窗 -->
    <opendialog
      :isshowDialog="isshowEnter"
      :dialogTitle="'恭喜您已成功入驻'"
      @closedialog="closedialog"
    ></opendialog>
    <password
      @setpasswordok="setpasswordok"
      @closepass="closepass"
      :isshowDialog="isshowpassword"
      :dialogTitle="'设置密码'"
    ></password>
  </div>
</template>

<script>
//底部组件
import footers from './component/footer'
import opendialog from './component/opendialog'
import dashboardTitle from './component/dashboardTitle'
import shortcuts from './component/shortcuts'
import studentNum from './component/studentNum'
import trainchart from './component/trainchart'
import recruit from './component/recruit'
import dashboardSwiper from './component/dashboardSwiper'
import password from './component/password'
import { forgetpassword } from '@/api/common'
import { getSessionStorage } from '@/utils/accessToken'
import { json } from 'body-parser'
//api
import { getworkData, getCOption } from '@/api/common'
export default {
  name: 'More',
  components: {},
  data() {
    return {
      //loading加载
      loading: true,
      //数据是否请求成功
      dataSuccess: false,
      //是否显示入驻成功弹窗
      isshowEnter: false,
      //是否显示密码输入
      isshowpassword: false,
      //驾校的名字
      schoolName: '',
      //招生数据
      stTotal: {},
      //饼图数据
      shortcutsData: {},
      //统计数据
      recruitData: {},
      setTingData: [],
    }
  },
  mounted() {
    //获取工作台饼图和统计图数据
    this.getworkData()
    //获取选项数据
    this.getCarOption()
    //判断是否显示设置密码
    let userinfo = getSessionStorage('userinfo')
    let isauth = getSessionStorage('isauth')
    //判断是否需要第一次进入设置密码
    if (!userinfo.isSetPassword) {
      this.isshowpassword = true
    } else {
      if (!userinfo.isApproval && !isauth) {
        this.isshowEnter = true
      }
    }
  },

  methods: {
    //获取固定选项数据
    async getCarOption() {
      let data = await getCOption()
      if (data.code == '0000') {
        //存入sessionStorage
        window.sessionStorage.setItem('Options', JSON.stringify(data.data))
      }
    },
    //获取工作台饼图和统计图数据
    async getworkData() {
      let data = await getworkData()
      //驾校的名字
      this.schoolName = data.data.schoolTeamName
      //招生数据
      this.stTotal = data.data.total
      //饼图数据
      this.shortcutsData = data.data.subTotal.chartData
      //统计数据
      this.recruitData = data.data.chartTotal.chartData
      //统计数据
      this.setTingData = data.data.quickOperation
      this.dataSuccess = true
      //取消loding
      this.loading = false
      if (data.data.noticeUpdate && !getSessionStorage('isauth')) {
        this.$notify({
          title: data.data.noticeUpdate.updateDate,
          message: data.data.noticeUpdate.updateInfo,
          duration: 0,
          offset: 50,
        })
      }
    },
    //设置完密码 隐藏设置密码的输入框
    setpasswordok() {
      let userinfo = getSessionStorage('userinfo')
      this.isshowpassword = false
      //如果没有认证 显示认证提示框
      if (!userinfo.isApproval) {
        this.isshowEnter = true
      }
    },
    //关闭密码设置弹窗
    closepass() {
      let userinfo = getSessionStorage('userinfo')
      this.isshowpassword = false
      if (!userinfo.isApproval) {
        this.isshowEnter = true
      }
    },
    //关闭弹窗
    closedialog() {
      window.sessionStorage.setItem('isauth', 1)
      this.isshowEnter = false
    },
  },
  components: {
    opendialog,
    password,
    dashboardTitle,
    dashboardSwiper,
    shortcuts,
    trainchart,
    recruit,
    studentNum,
    footers,
  },
}
</script>
<style lang="scss" scoped>
.more-container {
  background-color: #f6f8f9 !important;
  ::v-deep {
    .el-card__body {
      > div {
        min-height: 220px;
        padding: 20px;

        > ul {
          > li {
            line-height: 30px;
          }
        }

        > img {
          display: block;
          margin: 40px auto;
          border: 1px solid #dedede;
        }
      }
    }
  }
}
.echartsarea {
  margin-top: 25px;
  .e-left {
    width: 97%;
    background-color: #f6f8f9;
    border-radius: 10px;
    .shortcuts {
      width: 100%;
      height: 240px;
      background-color: #fff;
      padding: 18px;
      box-sizing: border-box;
      border-radius: 10px;
    }
    .train {
      margin-top: 20px;
      width: 100%;
      height: 350px;
      background-color: #fff;
      padding: 18px;
      box-sizing: border-box;
      border-radius: 10px;
    }
  }
  .e-right {
    width: 100%;
    height: 400px;
    border-radius: 10px;
  }
}
.right-top {
  margin-bottom: 20px;
}
.dashboard-content {
  margin-bottom: 50px;
}
.dashboardtitle {
  // // position: absolute;
  // // z-index: 999;
  // position: relative;
  // top: 10px;
  // left: 45px;
  // background: #f6f8f9;
}
</style>
